import { Meta, Story, Canvas, Props } from "@storybook/blocks";

import { ViewPort, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
import { red, green, blue, description } from "../Utils";
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
import * as ViewPortStories from './ViewPort.stories';

<CommonHeader />

<Meta of={ViewPortStories} />

## ViewPort

Top-level space that fills entire browser view port

### Full coverage

<Canvas of={ViewPortStories.Default} />

## With offsets

Fills entire browser view port with offsets from the edge. Useful for making visible existing
window elements that may be on the page.

### With a top offset

<Canvas of={ViewPortStories.TopOffset} />

### With a right offset

<Canvas of={ViewPortStories.RightOffset} />

### With a bottom offset

<Canvas of={ViewPortStories.BottomOffset} />

### With a left offset

<Canvas of={ViewPortStories.LeftOffset} />

### Properties

<ViewPortStories.Properties />
